<template>
  <div class="top-right-btn" style="    position: absolute;right: 10px;">
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button  circle icon="Search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button  circle icon="Refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
        <el-button  circle icon="Menu" @click="showColumn()" />
      </el-tooltip>
    </el-row>
    <el-drawer :title="title" v-model="open" size="40%" :show-close="false">
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="hidevalue"
        :data="showvalue"
        @change="dataChange"
      />
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import {defineProps, defineEmits, ref, inject, reactive, onMounted, nextTick} from 'vue'
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true,
  },
  columns: {
    type: Array,
  },
})
interface Option {
  key: number
  label: string
  disabled: boolean
}

const emit = defineEmits(["update:showSearch","updatcolumns","queryTable"]); // 声明触发事件 childClick
let showvalue=ref([])
let hidevalue=ref([])
let title=ref("显示/隐藏")
let open=ref(false)
let mycolumns=ref(props.columns)
onMounted(()=>{
 nextTick(()=>{
   for (let item in props.columns) {
     if (props.columns[item].visible === false) {
       hidevalue.value.push({
         key:props.columns[item]["index"],
         label:props.columns[item].label,
         disabled:false
       });
     }else{
       showvalue.value.push({
         key:props.columns[item]["index"],
         label:props.columns[item].label,
         disabled:false
       })
     }
   }
 })
})
let toggleSearch=()=>{
  emit("update:showSearch", !props.showSearch)
}
let refresh=()=>{
  emit("queryTable")
}
let dataChange=(data:any)=>{
  for (var item in props.columns) {
    let isincludes=!hidevalue.value.includes(props.columns[item]["index"]);
    props.columns[item].visible = isincludes;
  }
  emit("updatcolumns",props.columns)
}
let showColumn=()=> {
  open.value = true;
}
</script>
<style  scoped>
  ::v-deep .el-transfer__button {
    padding: 12px;
    display: block;
    margin-left: 0px;
  }
  ::v-deep .el-transfer__button:first-child {
    margin-bottom: 10px;
  }
  .top-right-btn {
    position: relative;
    float: right;
  }
</style>